<template>
  <div class="MTBAReport">
    <el-row>
      <el-col :span="24">
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t('search') }}</el-button>
          <el-button type="primary" icon="el-icon-upload" @click="doExport">{{ $t('export') }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <div class="echart-box">
      <div class="echart-c">
        <div class="echart-gauge-list">
          <div class="echart-gauge-item">
            <gaugeChart />
          </div>
          <div class="echart-gauge-item">
            <gaugeChart />
          </div>
        </div>
        <div class="echart-bar">
          <mixLineBar />
        </div>
      </div>
    </div>
    <el-card shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import gaugeChart from './components/gaugeChart.vue'
import mixLineBar from './components/mix-line-bar.vue'
import { getReportList, getEnumList } from '@/api/dashboardManager/output'
import { mapGetters } from 'vuex'
export default {
  name: 'MTBAReport',
  components: { gaugeChart, mixLineBar },
  mixins: [mySetting],
  data() {
    return {
      infoForm: {},
      searchTags: [
        { label: this.$t('processFlow'), prop: 'processFlow', tag: 'DynInput' },
        { label: this.$t('handlerId'), prop: 'handler', tag: 'DynInput' },
        { label: this.$t('productName'), prop: 'productName', tag: 'DynInput' },
        { label: this.$t('OutputType'), prop: 'outputType', tag: 'DynSelect', translate: true },
        { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.infoForm.startTime = Array.isArray(value) ? value[0] : null
          this.infoForm.endTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'systemTime', label: 'SYSTEM_TIME' },
        { prop: 'outputValue', label: this.$t('processFlow') },
        { prop: 'testedQty', label: 'TestQty' },
        { prop: 'passQty', label: 'PassQty' },
        { prop: 'yield', label: this.$t('yield') }
      ],
      tableLoading: true
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  created() {
    this.initList()
    this.getOutputType()
  },
  methods: {
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    async initList() {
      const res = await getReportList(this.$clearNull(this.infoForm))
      this.tableData = res.data
      this.tableLoading = false
    },
    async doExport() {
      const res = await getReportList(this.$clearNull({ ...this.infoForm, toexcel: 1 }))
      // window.location.href = this.baseApi + '/' + res.data
      window.open(this.baseApi + '/' + res.data)
    },
    async getOutputType() {
      const res = await getEnumList({ enumName: 'OutputTypeEnum' })
      this.$set(this.selectList, 'outputType', res.data)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
.echart-box{
  width: 100%;
  background-color: #fff;
  .echart-c{
    width: 90%;
    display: flex;
    margin: 0 auto;
  }
  .echart-gauge-list{
    width: 250px;
    height: 400px;
    .echart-gauge-item{
        width: 100%;
        height: 200px;
    }
  }
  .echart-bar{
    flex: 1;
    height: 400px;
  }
}
</style>
